<template>
  <div class="search-wrap">
    <div style="padding-top: 10px;">
      <van-search
        show-action
        placeholder="请输入查询编号"
        shape="round"
        readonly
        @click-input="onClickButton"
        @search="onSearch"
      >
        <template #action>
          <div style="color: #1989fa" @click="onClickButton">搜索</div>
        </template>
      </van-search>
    </div>
    <van-sticky>
      <div style="padding: 10px 0; background-color: #fff; width: 100vw; text-align: center;">
        <van-tabs v-model:active="type" type="card" @click-tab="onClickTab">
          <van-tab title="款式咨詢"></van-tab>
          <van-tab title="大辦单"></van-tab>
          <van-tab title="首辦单"></van-tab>
        </van-tabs>
      </div>
    </van-sticky>
    <div style="margin-bottom: 50px;">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div class="order-item" v-if="type==0" v-for="item in list" :key="item" @click="onClickItem(item)">
          <div class="item-title">款式編號：{{ item.styleNum }}</div>
          <div class="item-desc">SBU：{{ item.sbuNum }}</div>
          <div class="item-desc">品牌：{{ item.customerBrand }}</div>
          <div class="item-desc">客戶編號：{{ item.cumstomerNum }}</div>
        </div>
        <div class="order-item" v-if="type==1" v-for="item in list" :key="item" @click="onClickItem(item)">
          <div class="item-title">大辨編號：{{ item.largeScaleNum }}</div>
          <div class="item-desc">SBU：{{ item.sbuNum }}</div>
          <div class="item-desc">品牌：{{ item.customerBrand }}</div>
          <div class="item-desc">客戶編號：{{ item.cumstomerNum }}</div>
        </div>
        <div class="order-item" v-if="type==2" v-for="item in list" :key="item" @click="onClickItem(item)">
          <div class="item-title">首辨編號：{{ item.firstOrderNum }}</div>
          <div class="item-desc">SBU：{{ item.sbuNum }}</div>
          <div class="item-desc">品牌：{{ item.customerBrand }}</div>
          <div class="item-desc">客戶編號：{{ item.cumstomerNum }}</div>
        </div>
      </van-list>
    </div>
  </div>
  <NavBar :active="0"></NavBar>
</template>

<script setup>

defineOptions({
  name: "OrderList",
});

// 自动获取字典
import { useRoute, useRouter } from "vue-router";
import 'vant/es/tabs/style';
import 'vant/es/tab/style';
import { ref, onMounted, watchEffect, onActivated, onDeactivated } from "vue";
import { getProductStylesList } from '@/api/plmProductStyles';
import { getLargeScaleOrderList } from "@/api/plmLargeScaleOrder";
import { getFirstOrderProcessingList } from "@/api/plmFirstOrderProcessing";
import { showToast } from 'vant';
import NavBar from "@/components/NavBar/NavBar.vue";
const router = useRouter();
const route = useRoute();

const type = ref(0);
const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const page = ref(1);
const pageSize = ref(20);
const saveData = ref(null);

watchEffect(() => {
  
});

// onActivated(() => {
//   console.log('onActivated==========>', saveData.value)
//   if (saveData.value) {
//     type.value = saveData.value.type;
//     list.value = saveData.value.list;
//     loading.value = saveData.value.loading;
//     finished.value = saveData.value.finished;
//     page.value = saveData.value.page;
//     pageSize.value = saveData.value.pageSize;
//   }
  
// })

// onDeactivated(() => {
//   console.log('onDeactivated==========>')
//   saveData.value = {
//     type: type.value,
//     list: list.value,
//     loading: loading.value,
//     finished: finished.value,
//     page: page.value,
//     pageSize: pageSize.value
//   }
// })

onMounted(async () => {
  onSearch();
});

function onClickTab({ name }) {
  type.value = name;
  finished.value = false;
  page.value = 1;
  list.value = [];
  onSearch();
}

function onLoad() {
  onSearch();
}

function onSearch() {
  if (type.value == 0) {
    queryProductStylesList();
  } 
  if (type.value == 1) {
    queryLargeScaleOrderList();
  }
  if (type.value == 2) {
    queryFirstOrderProcessingList();
  }
}

function onClickButton() {
  router.push({ path: '/mobile/orderSearch', query: { type: type.value } })
}

function onClickItem(e) {
  console.log('e=========>', e);
  if (type.value == 0) {
    router.push({ path: '/mobile/productStyleDetail', query: { styleNum: e.styleNum } })
  }
  if (type.value == 1) {
    router.push({ path: '/mobile/largeOrderDetail', query: { largeScaleNum: e.largeScaleNum } })
  }
  if (type.value == 2) {
    router.push({ path: '/mobile/firstOrderDetail', query: {  firstOrderNum: e.firstOrderNum } })
  }
}

async function queryProductStylesList() {
  loading.value = true;
  const res = await getProductStylesList({ page: page.value, pageSize: pageSize.value });
  loading.value = false;
  if (res.code === 0) {
    if (!res.data.list || res.data.list.length == 0) {
      finished.value = true;
    } else {
      page.value = page.value + 1;
      list.value = list.value.concat(res.data.list || [])
    }
  }
}

async function queryLargeScaleOrderList() {
  loading.value = true;
  const res = await getLargeScaleOrderList({ page: page.value, pageSize: pageSize.value });
  loading.value = false;
  if (res.code === 0) {
    if (!res.data.list || res.data.list.length == 0) {
      finished.value = true;
    } else {
      page.value = page.value + 1;
      list.value = list.value.concat(res.data.list || [])
    }
  }
}

async function queryFirstOrderProcessingList() {
  loading.value = true;
  const res = await getFirstOrderProcessingList({ page: page.value, pageSize: pageSize.value });
  loading.value = false;
  if (res.code === 0) {
    if (!res.data.list || res.data.list.length == 0) {
      finished.value = true;
    } else {
      page.value = page.value + 1;
      list.value = list.value.concat(res.data.list || [])
    }
  }
}


</script>

<style lang="scss" scoped>
@import url("@/style/common/common.scss");
.search-wrap {
  width: 100vw;
  height: 100%;
  background-color: #fff;
}

.order-item {
  background-color: #fff;
  box-shadow: 0.5px 0.5px 1px 1px #eee;
  margin: 10px 16px 0;
  padding: 10px 20px;
  border-radius: 6px;

  .item-title {
    font-size: 14px;
    color: #333;
  }

  .item-desc {
    font-size: 12px;
    color: #666;
    margin-top: 8px;
  }
}

</style>
